import React from 'react';
import SideBar from './SideBar';
import { getTheme } from 'office-ui-fabric-react';

const theme = getTheme();

const layoutStyle = {
  display: 'flex',
  height: '100vh',
  alignItems: 'stretch'
};

const sideStyle = {
  width: '240px',
  boxSizing: 'border-box',
  background: theme.palette.themeDark
};

const contentStyle = {
  flex: 1,
  overflowY: 'scroll',
  marginLeft: '1em',
  paddingTop: '1em',
  paddingBottom: '1em',
  paddingRight: '1em',
  boxSizing: 'border-box'
  // backgroundColor:theme.palette.neutralLighterAlt
};

const SideLayout = ({ children }) => {
  return (
    <div className="layout-wrapper" style={layoutStyle}>
      <div className="layout-side" style={sideStyle}>
        <SideBar />
      </div>
      <div className="layout-content" style={contentStyle}>
        {children}
      </div>
    </div>
  );
};

export default SideLayout;
